<template>
	<view>
		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="queryList"
			:refresher-enabled="false"
			v-show="!loading"
		>
			<view class="bgc">
				<navbar>
					<view slot="center" class="center" v-if="!loading">
						<u-subsection
							:list="interpretList"
							activeColor="#000"
							bgColor="#fff"
							mode="button"
							:current="current"
							@change="onChange"
						></u-subsection>
					</view>
				</navbar>
				<view class="search">
					<view class="input" @click="goSearch">
						<u--input
							:placeholder="$t('home.search')"
							border="none"
							disabled
							disabledColor="#fff"
						/>
					</view>
					<view class="sweep" @click="scanCode"><image src="/static/image/sweep.png"></image></view>
				</view>
			</view>
			<view class="swiper">
				<u-swiper
					:list="imgList"
					height="160"
					keyName="image"
					previousMargin="30"
					bgColor="#ffffff"
					nextMargin="30"
					circular
					radius="5"
					@click="getSwiper"
				></u-swiper>
			</view>
			<view class="grid">
				<u-grid :border="false" col="5">
					<u-grid-item
						v-for="(listItem, listIndex) in list"
						:key="listIndex"
						@click="goGrid(listItem)"
					>
						<image :src="listItem.image"></image>
						<u--text
							color="#141414"
							size="12"
							lines="1"
							align="center"
							:text="language == 'zh' ? listItem.name : listItem.name_copy"
						></u--text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="content">
				<view class="title m-bottom-10">
					<u--text :text="$t('home.title')" color="#000" size="18" bold></u--text>
					<view class="screen" @click="show = true">
						<text>{{ $t('home.screen') }}</text>
						<image src="/static/image/screen.png"></image>
					</view>
				</view>
				<scroll-view scroll-x class="m-bottom-10">
					<view class="filtrate">
						<view
							:class="[index == select ? 'activeItem' : '']"
							class="filtrate_item"
							v-for="(item, index) in exhibition"
							:key="index"
							@click="setFiltrate(item)"
						>
							{{ language == 'zh' ? item.keywords : item.keywords_copy }}
						</view>
					</view>
				</scroll-view>
				<view>
					<storeItem
						:item="item"
						v-for="(item, index) in dataList"
						:key="index"
						@goDetail="goDetail"
					/>
					<view style="background: transparent;height: 100rpx;"></view>
				</view>
			</view>
			<u-popup :show="show" mode="top" :safeAreaInsetBottom="false" @close="show = false">
				<view :style="{ height: popupHeight + 'px' }" class="popopBox">
					<view :style="{ height: topHight + 'px' }"></view>
					<scroll-view
						class="box-list"
						scroll-y
						:style="{ height: popupHeight - topHight - 54 + 'px' }"
					>
						<view v-for="(item, index) in screenList" :key="index">
							<view class="m-bottom-15" v-if="item.detail.length > 0">
								<u--text :text="item.keywords" bold size="16" color="#141414" margin="10px 0px" />
								<view class="time" v-if="item.keywords == '用餐日期'">
									<view class="timeBox" @click="timeShow = true">
										<text>{{ yearText || '请选择日期' }}</text>
										<image src="/static/image/year.png"></image>
									</view>
									<!-- <view class="timeBox" @click="hourShow=true" v-if="yearText">
										<text>{{hourText||'请选择时间'}}</text>
										<image src="/static/image/hour.png"></image>
									</view> -->
								</view>
								<view class="grid-4" v-else>
									<view
										class="grid-item"
										@click="setFiltrate(index, e, eIndex)"
										:class="[e.show ? 'activeItem' : '']"
										v-for="(e, eIndex) in item.detail"
										:key="eIndex"
									>
										{{ language == 'zh' ? e.title : e.title_copy }}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="popop-footer">
						<view class="reset" @click="setReset">{{ $t('home.resetBtn') }}</view>
						<view class="confirm" @click="onConfirm">{{ $t('home.confirmBtn') }}</view>
					</view>
				</view>
			</u-popup>
		</z-paging>
		<u-datetime-picker
			:show="timeShow"
			closeOnClickOverlay
			@close="timeShow = false"
			v-model="timeVlue"
			mode="date"
			@cancel="timeShow = false"
			@confirm="timeChange"
		></u-datetime-picker>
		<u-datetime-picker
			:show="hourShow"
			mode="time"
			@close="hourShow = false"
			closeOnClickOverlay
			@cancel="hourShow = false"
			@confirm="yearChange"
		></u-datetime-picker>
		<!-- <language @cutsuccess="e=>e=='zh'?current=0:current=1"></language> -->
		<tabbar :value="0"></tabbar>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import http from '@/mixins/http.js';
import amapFile from '@/mixins/amap-wx.130.js';
export default {
	data() {
		return {
			select: 0,
			dataList: [],
			interpretList: ['汉', 'ئۇ'],
			current: 0,
			topHight: 0,
			imgList: [],
			list: [],
			show: false,
			popupHeight: 0,
			timeVlue: Number(new Date()),
			timeShow: false,
			hourShow: false,
			yearText: '',
			hourText: '',
			user_location: 0,
			exhibition: [], //首页筛选
			screenList: [], //弹窗筛选
			type: [],
			loading: true
		};
	},
	onLoad() {
		this.getlocation();
		this.init();
		uni.$on('uploadList', () => {
			this.$refs.paging.reload();
		});
	},
	onShow() {
		// 进入小程序后获取当前语言 设置下标
		this._i18n.locale == 'zh' ? (this.current = 0) : (this.current = 1);
	},
	onReady() {
		this.popupHeight = uni.$u.sys().windowHeight * 0.6;
	},
	computed: {
		language() {
			return this._i18n.locale;
		},
		...mapGetters(['isLogin', 'addressText'])
	},
	methods: {
		...mapMutations(['setAddressText']),
		getSwiper(event) {
			let shop_id = this.imgList[event].url;
			shop_id !== null ? uni.$u.route('/pagesA/home/merchantDetail?id=' + shop_id) : '';
		},
		setFiltrate(items, e, eIndex) {
			//从弹窗点击

			if (e) {
				this.screenList[items].detail.map((item, index) => {
					item.show = index == eIndex ? true : false;
				});
				let index = -1;
				if (this.type.length > 0) {
					index = this.type.findIndex(item => items.id == item.id);
				}
				if (index != -1) {
					this.type[index].detail[0].id = e.id;
				} else {
					let obj = {
						id: this.screenList[items].id,
						detail: [
							{
								id: e.id
							}
						]
					};
					this.type.push(obj);
				}
			} else {
				//从首页点击
				// items.show = !items.show;
				// let index = -1;
				// if (this.type.length > 0) {
				// 	index = this.type.findIndex(item => items.id == item.id);
				// }
				// if (items.show) {
				// 	let obj = {
				// 		id: items.id,
				// 		detail: [
				// 			{
				// 				id: ''
				// 			}
				// 		]
				// 	};
				// 	this.type.push(obj);
				// } else {
				// 	this.type.splice(index, 1);
				// }
				// // this.$refs.paging.reload();

				//点击记性排序
				if (this.select === 0) {
					this.dataList.sort((el1, el2) => {
						return el2.comment_num - el1.comment_num;
					});
				}
				if (items.keywords === '点评最多') {
					this.select = 0;
					this.dataList.sort((el1, el2) => {
						return el2.comment_num - el1.comment_num;
					});
				} else if (items.keywords === '评分最高') {
					this.select = 1;
					console.log(this.dataList);
					this.dataList.sort((el1, el2) => {
						return el2.score_service - el1.score_service;
					});
				} else if (items.keywords === '离我最近') {
					this.select = 2;
					this.dataList.sort((el1, el2) => {
						return parseFloat(el1.location) - parseFloat(el2.location);
					});
				}
			}
		},
		onConfirm() {
			this.show = false;
			this.$refs.paging.reload();
		},
		setReset() {
			this.type = [];
			this.exhibition.forEach(item => (item.show = false));
			this.screenList.forEach(item => {
				item.detail.forEach(e => (e.show = false));
			});
			this.$refs.paging.reload();
			this.show = false;
		},
		init() {
			// 获取弹窗筛选
			this.$http
				.post('index/searchUserIndex', {
					type: 1
				})
				.then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.detail.forEach(e => {
								e.show = false;
							});
						});
						this.screenList = res.data;
					}
				});
			// 获取首页筛选
			this.$http.post('index/searchType').then(res => {
				if (res.code == 1) {
					res.data.search.forEach(item => {
						item.detail.forEach(e => {
							e.show = false;
						});
					});
					this.exhibition = res.data.search;
				}
			});
		},
		getlocation() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					this.user_location = `${res.longitude},${res.latitude}`;
					uni.setStorageSync('latitude', res.latitude);
					uni.setStorageSync('longitude', res.longitude);
					uni.setStorageSync('user_location', this.user_location);
					const myAmapFun = new amapFile.AMapWX({
						key: '29c9db50acb643230d3a3485f7a9f4f7'
					});
					myAmapFun.getRegeo({
						location: `${res.longitude},${res.latitude}`,
						success: e => {
							this.setAddressText(e[0].regeocodeData.addressComponent.city);
							this.$refs.paging.reload();
						},
						fail: err => {}
					});
				}
			});
		},
		getTimes(type) {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = '0' + month) : '';
			day >= 0 && day <= 9 ? (day = '0' + day) : '';
			if (type == 'year') {
				var timer = year + '-' + month + '-' + day;
			} else {
				var timer = hour + ':' + minute;
			}
			return timer;
		},
		queryList(pageNo, pageSize) {
			this.$http
				.post('index/index', {
					limit: pageSize,
					page: pageNo,
					type: this.type.length > 0 ? this.type : null,
					user_location: this.user_location,
					city: this.addressText
				})
				.then(res => {
					if (res.code == 1) {
						this.imgList = res.data.images;
						this.list = res.data.category;
						console.log(res.data.shop.data);
						this.$refs.paging.complete(res.data.shop.data);
						this.dataList = res.data.shop.data;
						this.loading = false;
						this.$nextTick(() => {
							const query = uni.createSelectorQuery().in(this);
							query
								.select('.bgc')
								.boundingClientRect(data => {
									this.topHight = data.height + 20;
								})
								.exec();
						});
					}
				});
		},
		scanCode() {
			uni.scanCode({
				success: res => {
					console.log(res);
					// let path = decodeURIComponent(res.path).split('?');
					// let queryList = path[1].split('*');
					// let shopId = queryList[0].split('/')[1];
					// let num = queryList[1].split('/')[1];
					uni.navigateTo({
						url: '/' + res.path
					});
				}
			});
		},
		onChange(e) {
			this.current = e;
			// 设置语言 并缓存本地
			this._i18n.locale = this.current == 0 ? 'zh' : 'en';
			uni.setStorageSync('locale', this._i18n.locale);
		},
		goDetail(item) {
			this.isLogin
				? uni.$u.route('/pagesA/home/merchantDetail?id=' + item.id)
				: uni.$u.route('/pagesA/my/login');
		},
		timeChange(e) {
			this.timeShow = false;
			this.yearText = this.timetrans(e.value);
			let index = this.screenList.findIndex(item => item.keywords == '用餐日期');
			let eIndex = this.type.findIndex(item => item.id == this.screenList[index].id);
			if (eIndex == -1) {
				let obj = {
					id: this.screenList[index].id,
					detail: [
						{
							time: this.yearText
						}
					]
				};
				this.type.push(obj);
			} else {
				this.type[eIndex].detail[0].time = this.yearText;
			}
		},
		yearChange(e) {
			this.hourShow = false;
			this.hourText = e.value;
		},
		goGrid(item) {
			uni.$u.route({
				url: '/pagesA/home/categoryList',
				params: {
					id: item.id,
					title: this.language == 'zh' ? item.name : item.name_copy
				}
			});
		},
		goSearch() {
			uni.$u.route('/pagesA/home/search');
		}
	}
};
</script>
<style>
page {
	background-color: #f6f8fa;
}
</style>
<style lang="scss" scoped>
/deep/.u-grid-item {
	margin-bottom: 20rpx !important;
}

/deep/.u-icon__icon {
	font-size: 26rpx !important;
	color: #141414;
}

.activeItem {
	background-color: #fff8e2 !important;
	color: #ff9f04 !important;
}

.popop-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #eeeeee;
	height: 54px;

	.reset {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #141414;
		font-weight: bold;
		font-size: 32rpx;
	}

	.confirm {
		background-color: #ffc100;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #141414;
		font-weight: bold;
		font-size: 32rpx;
	}

	.btn-reset {
		color: #141414;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 26rpx;
		background-color: #fff;
	}

	.btn-confirm {
		background-color: #ffc100;
		color: #141414;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 26rpx;
	}
}

.box-list {
	padding: 20rpx 30rpx;
	box-sizing: border-box;

	.grid-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;

		.grid-item {
			padding: 15rpx 10rpx;
			background-color: #f8f8f8;
			color: #656565;
			font-size: 26rpx;
			border-radius: 60rpx;
			text-align: center;
			display: -webkit-box !important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical !important;
		}
	}

	.time {
		display: flex;
		align-items: center;

		.timeBox {
			padding: 18rpx;
			background-color: #f8f8f8;
			color: #656565;
			font-size: 26rpx;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}
}
.center {
	width: 150rpx;
	margin-left: 150rpx;
}

/deep/.u-icon__label {
	font-weight: bold !important;
}

/deep/.u-navbar--fixed {
	position: relative !important;
}

/deep/.zp-container {
	margin-bottom: 110rpx !important;
}

.bgc {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	height: 240rpx;
	z-index: 10080 !important;
	background-color: #fff;
	position: relative;
	background-image: url();

	.nav_left {
		display: flex;
		align-items: center;

		.location {
			width: 30rpx;
			height: 33rpx;
			margin-right: 10rpx;
		}
	}

	.search {
		position: absolute;
		left: 50%;
		bottom: -20px;
		width: 90%;
		transform: translateX(-50%);
		display: grid;
		grid-template-columns: auto 25px;
		grid-column-gap: 20rpx;
		box-sizing: border-box;
		padding-right: 40rpx;
		z-index: 10080 !important;

		.input {
			background-color: #fff;
			border-radius: 88rpx;
			box-shadow: 0px 9px 19px 0px rgba(218, 218, 218, 0.5);
			padding: 25rpx 40rpx;
			z-index: 10080 !important;
		}

		.sweep {
			background: #ffffff;
			box-shadow: 0px 9px 19px 0px rgba(218, 218, 218, 0.5);
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			padding: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.swiper {
	z-index: 100;
	background-color: #fff;
	padding: 85rpx 0 10rpx;
}

.grid {
	background-color: #fff;
	padding: 20rpx 30rpx 85rpx;

	image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin: 10rpx auto;
	}

	.grid-text {
		color: #141414;
		font-size: 24rpx;
		font-weight: 400;
	}
}

.content {
	border-top-right-radius: 30px;
	border-top-left-radius: 30px;
	margin-top: -50rpx;
	background-color: #f6f8fa;
	padding: 30rpx;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.screen {
			color: #abadae;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
	}

	.filtrate {
		// display: flex;
		// align-items: center;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;

		.filtrate_item {
			background: #fff;
			border-radius: 8rpx;
			padding: 10rpx;
			color: #231916;
			text-align: center;
			font-size: 28rpx;
			margin-right: 20rpx;
			box-shadow: 5px 5px 18px 0px rgba(232, 234, 236, 0.51);

			display: -webkit-box;
			/*弹性伸缩盒子模型显示*/
			-webkit-box-orient: vertical;
			/*排列方式*/
			-webkit-line-clamp: 1;
			/*显示文本行数*/
			overflow: hidden;
			/*溢出隐藏*/
		}
	}
}
</style>
